<script setup >
import { ref } from "vue";

import { useBaiDuAiService} from '@/api/baiduai.js'


const h = ref("");
const xx = ref(true);

const input = ref("")
console.log(input.value)
async function tch() {
  const result = await useBaiDuAiService(input.value)
  h.value = result.data;
  xx.value = false;
}


</script>

<template>
   
  <el-card class="kp" >
    <template #header>
      <div class="card-header" style="text-align: center;">
        <el-input class="wtk" v-model="input" style="width: 240px" placeholder="请输入问题" />
      </div>
    </template>

    <el-skeleton :rows="5" animated v-if=xx />
    <div class="nr">{{ h }}</div>


    <template #footer>
      <div class="mb-4" style="text-align: center;">
            <el-button type="success" round @click="tch()" >点击刷新</el-button>
          </div>
    </template>
  </el-card>

</template>


<style scoped>
/* .wtk {
  width: 100px;
  height: 50px;
} */
.nr {
  margin: 20px 10px;
  height: 50%;
  text-align: center;
}
.kp {
  max-width: 50%;
  height: 100%;
  margin: 0 auto;
  /* background-color: rgb(255, 255, 255); */
}


</style>